<template>
    <div>
      <el-page-header content="项目与测试集管理" />
      <el-card>
        <el-button type="primary" @click="showProjectDialog = true">新建项目</el-button>
        <el-table :data="projects">
          <el-table-column prop="name" label="项目名称" />
          <el-table-column prop="env" label="环境配置" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="editProject(scope.row)">编辑</el-button>
              <el-button @click="deleteProject(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog v-model="showProjectDialog" title="新建项目">
        <el-form :model="newProject">
          <el-form-item label="项目名称">
            <el-input v-model="newProject.name" />
          </el-form-item>
          <el-form-item label="环境配置">
            <el-input v-model="newProject.env" placeholder="如测试/预发/生产URL" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="createProject">创建</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  <script setup>
  import { ref } from 'vue';
  const projects = ref([
    { name: '电商前台', env: 'https://test.xxx.com' },
  ]);
  const showProjectDialog = ref(false);
  const newProject = ref({ name: '', env: '' });
  function createProject() {
    projects.value.push({ ...newProject.value });
    showProjectDialog.value = false;
    newProject.value = { name: '', env: '' };
  }
  function editProject(project) {}
  function deleteProject(project) {}
  </script>